<template>
    <el-dialog title="沟通记录" :show-close="false" v-model="recordDetailDialog" @close="handleRemoveModal(remove)" size="auto" :closeOnClickModal="false">
        <base-input @closedialog="handleClose">
            <el-row slot="body">
                <el-row>
                    <el-button type="primary" class="ok-btn" @click="addHandler">添加新纪录</el-button>
                </el-row>
                <data-list class='data-list light-header' @edit='editHandler' :table-data='dataList' :header-data='dataHeader' :column-formatter='listColumnFormatter' :column-formatter-data='listColumnFormatterData'></data-list>
            </el-row>
        </base-input>
    </el-dialog>
</template>
<!-- task_id = 19 -->
<script>
import BaseInput from '../../components/BaseInput'
import UploadPanel from '../../components/UploadPanel'
import Editor from '../../components/Editor'
import BaseList from '../../components/BaseList'

import {
    getStudentChatList
} from '../../api/modules/student'
import {
    RemoveModal
} from './mixins'
import {
    mapActions,
    mapState
} from 'vuex';
import {
    Dialog
} from './index'
import {
    ADD_RECORD
} from './types'
import { Loading } from 'element-ui'
import { Config } from '../../config/base'
import {
    doTimeFormat
} from '../../components/Util'
import {
    MPop
} from '../../components/MessagePop'
export default {
    mixins: [RemoveModal, MPop],
    props: {
        remove: {
            type: String
        },
        payload: {}
    },
    data() {
        return {
            recordDetailDialog: true,
            dataList: [],
            loadingInstance: null
        }
    },
    mounted() {
        this.loadingInstance = Loading.service({
            text: '加载中，请稍后',
            fullscreen: true
        });
        setTimeout(() => {
                    this.loadingInstance.close();
                }, Config.base_timeout);
            getStudentChatList(this.payload).then(res => {
                if(res.data.res_code === 1)
                {
                    this.dataList = res.data.msg;
                    
                    this.loadingInstance.close();
                }
            })
    },
    computed: {
        ...mapState({
           
        }),
        dataHeader() {
            return [
                {
                label: '序号',
                width: 90,
                sort: true
            },{
                    label: '时间',
                    prop: 'create_time',
                    width: 150,
                }, {
                    prop: 'info',
                    label: '事件记录'
                // },{
                //     label: '操作',
                //     width: 120,
                //     groupBtn: [{
                //         text: '编辑',
                //         param: 'edit'
                //     }]
                }]
        },
        listColumnFormatter(){
            return [
                {
                    columnName: 'create_time',
                    doFormat: doTimeFormat
                },
            ]
        },
        listColumnFormatterData(){
            return [];
        }
    },
    methods: {
        ...mapActions([
            
        ]),
        handleClose() {
            this.recordDetailDialog = false;
        },
        addHandler(formName) {
           this.handleClose();
           Dialog.methods.handleSelModal(ADD_RECORD,{detailId:this.payload});
        },
        editHandler(index, row) {
            this.handleClose();
            Dialog.methods.handleSelModal(ADD_RECORD, {detailId:this.payload, recordId:row.id});
        }
    },
    components: {
        'base-input': BaseInput,
        'upload-panel': UploadPanel,
        'text-editor': Editor,
        'data-list': BaseList,
    },
}

</script>
<style lang="scss">
#record-detail-container {
    @import "base.scss";
    input,
    textarea {
        resize: none;
        outline: none;
    }
    .close-dialog-panel {
        position: absolute;
        top: -40px;
        right: 13.5px;
        z-index: 99999;
        font-size: 30px;
        cursor: pointer;
        &:before {
            // color: #fff;
            color: #757575;
        }
    }
    .el-dialog {
        width: 800px;
        background: none;
        .body-top {
            padding-bottom: 10px;
        }
        .el-dialog__header {
            background: #333333;
            border-radius: 4px 4px 0 0;
            padding: 16px;
        }
        .el-dialog__body {
            padding: 0;
            background: #fff;
            border-radius: 0 0 4px 4px;
        }
        .ok-btn {
            background: #FB843E;
            border-radius: 4px;
            width: 200px;
            height: 36px;
            border: 0;
            margin: 30px 0;
        }
        .data-list {
            margin-bottom: 20px;
        }
    }
}
</style>